<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScript-AJAX的使用</title>
		<!--
			Ajax是一种在无需重新加载整个页面的情况下,能够实现局部更新的技术
			Ajax的核心是 XMLHttpRequest对象(异步的与服务器交换数据)
			使用Ajax发送请求的四个步骤:
				1.创建XMLHttpRequest对象
				2.设置onreadystatechange回调函数
				3.open(method, url, async)打开连接
					method: 请求类型 GET 或 POST
					url: 文件位置或请求地址
					async: 异步(true,默认)或 同步(false)
				4.send()发送请求用于GET请求;send(string)发送请求用于POST请求
				
			创建XMLHttpRequest: 
				var xhr;
				if (window.XMLHttpRequest) {
				    // 用于现代浏览器的代码
				    xhr = new XMLHttpRequest();
				} else {
				    // 应对老版本IE浏览器的代码
				     xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
				
			XMLHttpRequest对象方法:
				new XMLHttpRequest(): 创建对象
				open(method, url, async, user, psw):  打开连接
					method: 请求类型 GET 或 POST
					url: 文件位置,请求地址
					async: true（异步,默认）或 false（同步）
					user: 可选的用户名称
					psw: 可选的密码
				send():  发送请求
				abort(): 取消请求
				getAllResponseHeaders():  返回所有的头部信息
				getResponseHeader():  返回特定的头部信息
				setRequestHeader(): 向要发送的报头添加标签/值对
				
			XMLHttpRequest 对象属性:
				onreadystatechange:  定义当 readyState 属性发生变化时被调用的函数
				readyState:  保存 XMLHttpRequest的状态
					0：请求未初始化
					1：服务器连接已建立
					2：请求已收到
					3：正在处理请求
					4：请求已完成且响应已就绪
				status:  返回请求的状态号
					200: "OK"
					403: "Forbidden"
					404: "Not Found"
				responseText:  以字符串返回响应数据
				responseXML:  以XML数据返回响应数据
				statusText: 返回状态文本（比如 "OK" 或 "Not Found"）
			
		-->
		


	</head>
	<body>

		<div id="div1">div的文本内容1</div>
		<button id="but1" onclick="change1();">使用Ajax技术修改div的文本内容1</button>
		


		<script type="text/javascript" charset="UTF-8">
			// JavaScipt - Ajax - GET请求
			function change1(){
				// 1.创建XMLHttpRequest对象
				var xhr = new XMLHttpRequest();
				// 2.设置回调函数onreadystatechange
				xhr.onreadystatechange = function(data){
					// xhr.readyState代表服务器状态; xhr.status代表响应结果
					if(xhr.readyState==4 && xhr.status==200){
						// 此处表示服务器请求成功,并响应了结果
						// 动态修改页面的局部内容;修改div标签的文本内容
						document.getElementById("div1").innerText = xhr.responseText;
						// document.getElementById("div1").innerText = "div被修改后的内容";
						
					}
				}
				// 3.open(method, url, async)打开连接
				xhr.open("GET", "book.xml", true);
				// 4.send()发送请求
				xhr.send();
				// POST请求需要设置请求头信息
				// xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				// xhr.send("username=zhangsan");
				
				// 修改div的文本内容
				// var div1 = document.getElementById("div1").innerText = "div被修改后的内容";
				// console.log(div1)
			};
			
			
		
		</script>



	</body>
	

	
</html>


